<template>
	<view class="container">
		<view class="u-demo-area" @click="selectShow = true">
			<u-select v-model="selectShow" :safe-area-inset-bottom="true" confirm-color="#EA4445" :list="selectlist" @confirm="confirm" @cancel="cancel"></u-select>
			<view class="u-demo-result-line">{{ result }}</view>
			<u-icon name="arrow-down"></u-icon>
		</view>
	</view>
</template>

<script>
	export default{
		name:'type-select',
		props: {
			// 列表
			selectlist:{
				type:Array,
				default:[]
			},
		},
		data(){
			return{
				result: '全部',
				selectShow:false,
			}
		},
		methods:{
			confirm(e) {
				this.result = '';
				e.map((val, index) => {
					this.result += this.result == '' ? val.label : '-' + val.label;
					this.$emit("confirm",val.value);
				})
			},
			cancel(e) {
				console.log('用户取消选择');
			}
		}
	}
</script>

<style scoped>
	.u-demo-area{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-left: 10rpx;
		width: 164rpx;
		height: 48rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #808080;
		line-height: 48rpx;
		border: 2rpx solid #808080;
		border-radius: 24px;
	}
</style>